﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Buttons</title>
<style type="text/css">body { margin: 0; padding: 0; font: 12px/*62.5%*/ Verdana, sans-serif; } .section { margin-bottom: 15px; }</style>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<link type="text/css" href="../../style/ui.button.css" rel="stylesheet" />
<link type="text/css" href="../../style/ui.buttonset.css" rel="stylesheet" />

<script language="JavaScript" type="text/javascript" src="../../jquery-1.3.2.js"></script>
<script language="JavaScript" type="text/javascript" src="../../ui/ui.core.js"></script>
<script language="JavaScript" type="text/javascript">
(function ($) {
	var $prev_focused = null;
	var focus_orig = $.fn.focus;
	$.fn.focus = function () {
		if (!arguments.length) {
			if ($prev_focused) $prev_focused.blur();
			$prev_focused = this;
		}
		else {
			focus_orig.apply(this, function () { $prev_focused = $(this); });
		}
		return focus_orig.apply(this, arguments);
	};
	$(document).click(function () {
		if ($prev_focused) $prev_focused.blur();
		$prev_focused = null;
		
		$(document).find('.ui-state-focus').blur();
	});
})(jQuery);
</script>

<script language="JavaScript" type="text/javascript" src="../../ui/ui.button.js"></script>
<script language="JavaScript" type="text/javascript" src="../../ui/ui.buttonset.js"></script>
<script language="JavaScript" type="text/javascript">
jQuery(function ($) {
	$('#log').dblclick(function () { $('#log').empty(); });
	
	$('#anchorButtonDefault, #buttonDefault, #inputButtonDefault, #elementButtonDefault').button();
	$('#anchorButtonWithIcon, #buttonWithIcon, #inputButtonWithIcon, #elementButtonWithIcon').button();
	
	$('#buttonWithIcon').button('option', 'priority', 'secondary');
	$('#elementButtonWithIcon').button('option', 'priority', 'primary');
	
	$('#toggleButtons').children().button({ buttonMode: 'toggle' });
	
	$('.ui-buttonset')
		.children().button().end()
		.buttonset();
	
	$('.ui-button').bind('buttonclick buttonkeypress buttonaction'
			+' buttonmouseenter buttonmouseleave'
			+' buttonpressed buttonreleased'
			+' buttondragstart buttondragend'
			+' buttonfocus buttonblur', 
	function (event, info) {
		$('#log').prepend('' + $(this).button('option','text') + ': ' + event.type 
			+ (info && info.triggeredBy ? ' by '+info.triggeredBy : '') + '<br />');
	}).each(function () {
		$(this).button('originalElement').bind('click', function (event) {
			$('#log').prepend('original ' + $(this).button('option','text') + ': ' + event.type + '<br />');
		});
	});
});
</script>

<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<script type="text/javascript">
jQuery(function ($) {
	var $themeswitcher = $('.ui-themeswitcher');
	if ($themeswitcher.themeswitcher) {
		$themeswitcher.themeswitcher({
		}).before('<div class="ui-widget" style="margin-bottom: 0.5em">'
					+'<div class="ui-state-highlight ui-corner-all" style="padding:0.3em;">'
						+'<span class="ui-icon ui-icon-info" style="float:left;margin-right:0.3em"></span>'
						+'Select a theme to apply'
					+'</div>'
				+'</div>');
	}
	else {
		$themeswitcher.before('<div class="ui-widget" style="margin-bottom: 0.5em">'
								+'<div class="ui-state-error ui-corner-all" style="padding:0.3em;">'
									+'<span class="ui-icon ui-icon-alert" style="float:left;margin-right:0.3em"></span>'
									+'Unable to load ThemeSwitcher from jqueryui.com'
								+'</div>'
							+'</div>');
	}
});
</script>

</head>
<body>

<h1>Buttons</h1>

<div><div class="ui-themeswitcher"></div></div>

<h2>Default buttons</h2>
<div class="section">
	<a id="anchorButtonDefault">Anchor button</a>
	<button id="buttonDefault">Button button</button>
	<input type="button" id="inputButtonDefault" value="Input button" />
	<span id="elementButtonDefault">Span button</span>
</div>

<h2>Buttons with icons</h2>
<div class="section">
	<a id="anchorButtonWithIcon"><span class="ui-icon ui-icon-info"></span>Anchor button with icon</a>
	<button id="buttonWithIcon"><span class="ui-icon ui-icon-info"></span>Button button with icon</button>
	<input type="button" id="inputButtonWithIcon" value="Input button with icon" class="ui-icon-info" />
	<span id="elementButtonWithIcon"><span class="ui-icon ui-icon-info"></span>Span button with icon</span>
</div>

<h2>Toggle buttons</h2>
<div class="section">
	<div id="toggleButtons">
		<a id="" class=""><span class="ui-icon ui-icon-info"></span>Anchor button with icon</a>
		<button id="" class=""><span class="ui-icon ui-icon-info"></span>Button button with icon</button>
		<input type="button" id="" value="Input button with icon" class="ui-icon-info" />
		<span id="" class="ui-button-icon-solo"><span class="ui-icon ui-icon-info"></span>Span button with icon</span>
	</div>
</div>

<h2>Buttonset</h2>
<div class="section">
	<div class="ui-buttonset">
		<a id="" class="ui-button-icon-solo"><span class="ui-icon ui-icon-info"></span>Anchor button with icon</a>
		<a id="" class="ui-button-icon-solo"><span class="ui-icon ui-icon-info"></span>Anchor button with icon 2</a>
		<button id=""><span class="ui-icon ui-icon-info"></span>Button button with icon</button>
		<input type="button" id="" value="Input button with icon" class="ui-icon-info ui-button-icon-solo ui-button-toggle" />
		<span id="" class="ui-button-icon-solo ui-button-toggle"><span class="ui-icon ui-icon-info"></span>Span button with icon</span>
	</div>
</div>

<h2>Events log</h2>
<div id="log"></div>

</body>
</html>